<template>
  <div class="small-video-box">
    <div class="content" id="zoomchild">
      <onem ref="refv" :vid="props.gdid" />
      <!-- <el-icon class="btn" size="30"  @click="full"><FullScreen /></el-icon> -->
      <!-- <el-icon class="btn" size="30"  @click="minx"><CircleClose /></el-icon> -->
      <!-- <img class="btn" src="/images/new/close.png" @click="closeVideo" /> -->
      <img class="btn" src="/images/new/stop.png" @click="closeVideo" />
    </div>
    <ptz class="ptz rightptz" :vid="props.vid" />
  </div>
</template>

<script setup>
const props = defineProps({
  vid: String,
  gdid: String,
});
const emit = defineEmits(["close", "full"]);
const refv = ref();
const state = reactive({
  isfull: false,
});
const full = () => {
  state.isfull = true;
  emit("full");
  refv.value.resize();
};
const minx = () => {
  state.isfull = false;
  emit("close");
  refv.value.resize();
};
const closeVideo = () => {
  emit("close");
};
onMounted(() => {
  document
    .getElementById("zoomchild")
    .addEventListener("keydown", function (event) {
      event.stopPropagation();
      if (event.key === "Escape") {
        minx();
      }
    });
});
</script>

<style lang="scss" scoped>
.full2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.btn {
  width: 117.5px;
  height: 117.5px;
  cursor: pointer;
  position: fixed;
  top: 160px;
  right: 155px;
  z-index: 99;
}
.small-video-box {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 5px #000000cc;
  position: relative;
  display: flex;
  align-items: center;
  z-index: 4;
  .content {
    width: 480px;
    height: 283px;
    position: relative;
    padding: 15px;
    background: url("/images/new/videobg.png");
    background-size: 100% 100%;
    margin-right: 11px;
  }
  .rightptz {
    position: fixed;
    right: 155px;
    bottom: 620px;
  }
}
</style>